<template>
  <transition name="el-notification-fade">
    <div
      v-if="visible"
      :class="['notice-wrap']"
      @mouseenter="clearTimer()"
      @mouseleave="startTimer()"
    >
      <div class="notice-header">
        <img src="@/assets/images/bj-icon1.png" >
        报警信息
      </div>
      <div class="notice-content">
        <!-- <p>老人姓名：某某</p> -->
        <p>报警类型：{{ message }}</p>
        <p>报警地址：{{ address }}</p>
        <p>报警时间：{{ time }}</p>
        <div class="notice-action">
          <button type="button" @click.stop="click">处理</button>
          <button type="button" @click.stop="close">忽略</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
  let typeMap = {
    success: 'success',
    info: 'info',
    warning: 'warning',
    error: 'error'
  };

  export default {
    data() {
      return {
        visible: false,
        title: '',
        message: '',
        duration: 4500,
        type: '',
        address: '',
        time: '',
        showClose: true,
        customClass: '',
        iconClass: '',
        onClose: null,
        onClick: null,
        closed: false,
        verticalOffset: 0,
        timer: null,
        dangerouslyUseHTMLString: false,
        position: 'top-right',
        drawer: true,
        direction: 'rtl',
      };
    },

    computed: {
      typeClass() {
        return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
      },

      horizontalClass() {
        return this.position.indexOf('right') > -1 ? 'right' : 'left';
      },

      verticalProperty() {
        return /^top-/.test(this.position) ? 'top' : 'bottom';
      },

      positionStyle() {
        return {
          [this.verticalProperty]: `${ this.verticalOffset }px`
        };
      }
    },

    watch: {
      closed(newVal) {
        if (newVal) {
          this.visible = false;
          this.$el.addEventListener('transitionend', this.destroyElement);
        }
      }
    },

    methods: {
      toShowDrawer() {
        this.drawer = true;
      },
      destroyElement() {
        this.$el.removeEventListener('transitionend', this.destroyElement);
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },

      click() {
        if (typeof this.onClick === 'function') {
          this.onClick();
          const that = this;
          setTimeout(function() {
            that.close();
          }, 500)
        }
      },

      close() {
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose();
        }
      },

      clearTimer() {
        clearTimeout(this.timer);
      },

      startTimer() {
        if (this.duration > 0) {
          this.timer = setTimeout(() => {
            if (!this.closed) {
              this.close();
            }
          }, this.duration);
        }
      },
      keydown(e) {
        if (e.keyCode === 46 || e.keyCode === 8) {
          this.clearTimer(); // detele 取消倒计时
        } else if (e.keyCode === 27) { // esc关闭消息
          if (!this.closed) {
            this.close();
          }
        } else {
          this.startTimer(); // 恢复倒计时
        }
      }
    },
    mounted() {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.close();
          }
        }, this.duration);
      }
      document.addEventListener('keydown', this.keydown);
    },
    beforeDestroy() {
      document.removeEventListener('keydown', this.keydown);
    }
  };
</script>

<style lang="scss">
  .notice-wrap{
    width: 304px;
    background: #0a1e3d;
    box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.24);
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 15px;
    .notice-header{
      position: relative;
      width: 100%;
      height: 34px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #ffffff;
      background-color: #566eff;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      img{
        width: 18px;
        height: 18px;
        position: absolute;
        left: 12px;
        top: 8px;
      }
    }
    .notice-content{
      padding: 0 20px 14px 12px;
      p{
        font-size: 14px;
        line-height: 20px;
        margin-top: 8px;
        color: #ffffff;
      }
    }
    .notice-action{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      button{
        width: 53px;
        height: 25px;
        background: #af522f;
        border-radius: 13px;
        text-align: center;
        line-height: 25px;
        font-size: 14px;
        color: #ffffff;
        outline: none;
        border: none;
        cursor: pointer;
        &:nth-child(1) {
          background-color: #5657ff;
          margin-right: 10px;
        }
      }
    }
  }
</style>
